<!--
 * @description  : 市管-预览线路
 * @descriptionDetail: 市管-预览线路
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-09 18:43:02
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" style="z-index: 99999">
    </theme-navbar>
    <!-- #endif -->
    <view class="m-content">
      <view :style="{height: getContainerHeight()}" id="check-line-optimize-container"></view>
      <view v-show="showPanel" id="panel"></view>
    </view>
  </view>
</template>

<script>
import { AMapMixin, } from '@/common/AMapMixin.js';
export default {
  mixins: [AMapMixin,],
  data() {
    return {
      linePoints: this.getRouteParam(),  // 线路点
      driving: null,
      drivingResult: null,
      showPanel: false,
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initAmap(){},
    getContainerHeight() {
      let p = (this.$u.sys().windowHeight - 44 - this.$u.sys().statusBarHeight) + "px";
      // #ifdef H5-DINGDING
      p = (this.$u.sys().windowHeight - this.$u.sys().statusBarHeight) + "px";
      // #endif
      return p;
    },
    getContainerWidth() {
      return this.$u.sys().windowWidth + "px";
    },
    handlerBack() {
      this.amap && this.amap.destroy();
      this.backPrev({paramKey: "refresh",param: true,});
    },
    // 初始化地图
    initMap() {
      if (!this.hasInited) return;
      this.$modal.showLoading('地图加载中...');
      this.amap = new AMap.Map('check-line-optimize-container', {
        // center: new AMap.LngLat(121.525909,29.877595), // TODO 测试点位
        zoom: 12,
        resizeEnable: true,
        scrollWheel: true,
        zoomEnable: true,
        // mapStyle: 'amap://styles/fresh',
      });
      this.$modal.hideLoading();
      this.loadPlugin([
        'AMap.ToolBar',
        'AMap.OverView',
        'AMap.Geolocation',
      ], () => {
        this.amap.addControl(new AMap.ToolBar());
      });
      this.initLinePoint();
    },
    // 初始化线路点
    initLinePoint() {
      let waypoints = [];
      // 去除起点、终点
      this.linePoints.forEach((lp, idx) => {
        if (idx > 0 && idx < this.linePoints.length - 1) {
          waypoints.push(new AMap.LngLat(lp.lng, lp.lat));
        }
      });
      // 构造路线导航类
      this.driving = new AMap.Driving({
        map: this.amap,
        panel: "panel",
      });
      // 根据起终点经纬度规划驾车导航路线
      this.driving.search(new AMap.LngLat(this.linePoints[0].lng, this.linePoints[0].lat),
        new AMap.LngLat(this.linePoints[this.linePoints.length - 1].lng, this.linePoints[this.linePoints.length - 1].lat),{
          waypoints: waypoints,
        }, (status, result) => {
          // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === 'complete') {
            self.drivingResult = result;
            this.showPanel = true;
          } else {
            self.alert("预览路线失败");
          }
        });
    },
    // 调用高德地图APP (作废，此接口仅支持起点、终点，不支持途经点，无法满足当前业务场景需求)
    callApp() {
      this.driving.searchOnAMAP({
        origin: this.drivingResult.origin,
        // waypoints: this.drivingResult.waypoints,
        destination: this.drivingResult.destination,
      });
    },
  },
}
</script>

<style scoped lang="scss">
@import "@/style/common/rightMenu.scss";
	#check-line-optimize-container {
		width: 100%;
		height: 100%;
	}
 #panel {
        position: fixed;
        background-color: white;
        height: 30%;
		padding: 10rpx;
        overflow-y: auto;
        top: 60px;
        right: 1px;
        width: 240px;
    }
    #panel .amap-lib-driving {
	border-radius: 4px;
        overflow: hidden;
    }
</style>
